<template>
	<view class="service-providers">
		<NavBar title="推荐服务商" :isBack="true"></NavBar>
		<view class="content">
			<view class="form">
				<view class="row">
					<view>*被推荐人姓名：</view>
					<input type="text" v-model="formInfo.name">
				</view>
				<view class="row">
					<view>*被推荐人电话号码：</view>
					<input type="text" v-model="formInfo.mobile">
				</view>
				<view class="row">
					<view>被推荐人地址：</view>
					<input type="text" v-model="formInfo.address">
				</view>
				<view class="row">
					<view>被推荐人公司名称：</view>
					<input type="text" v-model="formInfo.company">
				</view>
				<view class="footer-btn">
					<view class="confirm" @click="confirm">确认提交</view>
					<view class="history" @click="toHistory">历史推荐</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { recommendationServer } from '@/api/services.js'
import { reactive, toRefs, onMounted } from 'vue'
import { showToast } from '@/common/interactiveFeedback.js'
const state = reactive({
	formInfo: {
		name: "",
		mobile: "",
		address: "",
		company: ""
	}
})
function toHistory () {
	uni.navigateTo({
		url: '/pages/services/recommendedRecord'
	})
}
async function confirm () {
	if (Object.values(state.formInfo).includes("")) return showToast("推荐信息不能为空")
	const res = await recommendationServer(state.formInfo)
	if (res.code) {
		showToast("提交成功")
		uni.navigateBack()
	}
	console.log(res, 'res');
}
const {
	formInfo
} = toRefs(state)
</script>

<style lang="scss" scoped>
page {
	background: #fff !important;
}

.service-providers {
	.content {
		position: relative;
		z-index: 1;
		background: #fff;
		padding: 69rpx 47rpx 200rpx;
		border-radius: 22rpx 22rpx 0rpx 2rpx;

		.form {
			.row {
				display: flex;
				align-items: center;
				margin-bottom: 38rpx;
				font-weight: bold;
				font-size: 26rpx;
				color: #333333;
				padding-bottom: 24rpx;
				border-bottom: 1rpx solid #F5F5F5;

				input {
					width: 360rpx;
				}
			}

			.footer-btn {
				margin-top: 80rpx;

				.confirm {
					text-align: center;
					width: 648rpx;
					height: 66rpx;
					line-height: 66rpx;
					background: #58DBCF;
					border-radius: 500rpx 500rpx 500rpx 500rpx;
					font-weight: 800;
					font-size: 30rpx;
					color: #FFFFFF;
					margin-bottom: 24rpx;
				}

				.history {
					text-align: center;
					font-weight: 500;
					font-size: 26rpx;
					color: #58DBCF;
				}
			}
		}
	}
}
</style>